
<div style="POSITION: relative" id="content">
  <h3>easyUI 创建一个 Property Grid </h3>
  <div id="article_content" class="article_content">
    <p>property grid带有一个内置的expand(展开)/collapse(合并)按钮可以简单的为行分组,你可以简单的创建一个可编辑属性的分层(hierarchic)列表.
</p>
    <p><img src="documentation/images/1344654177_7029.png" alt=""></p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 设置通过HTML</h4>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; class=&quot;easyui-propertygrid&quot; style=&quot;width:300px&quot;  
           url=&quot;propertygrid_data.json&quot;  
           showGroup=&quot;true&quot; scrollbarSize=&quot;0&quot;  
   &gt;&lt;/table&gt;  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 准备json数据</h4>

    <p>
    <pre name="code" class="javascript">[  
    {&quot;name&quot;:&quot;Name&quot;,&quot;value&quot;:&quot;Bill Smith&quot;,&quot;group&quot;:&quot;ID Settings&quot;,&quot;editor&quot;:&quot;text&quot;},  
    {&quot;name&quot;:&quot;Address&quot;,&quot;value&quot;:&quot;&quot;,&quot;group&quot;:&quot;ID Settings&quot;,&quot;editor&quot;:&quot;text&quot;},  
    {&quot;name&quot;:&quot;Age&quot;,&quot;value&quot;:&quot;40&quot;,&quot;group&quot;:&quot;ID Settings&quot;,&quot;editor&quot;:&quot;numberbox&quot;},  
    {&quot;name&quot;:&quot;Birthday&quot;,&quot;value&quot;:&quot;01/02/2012&quot;,&quot;group&quot;:&quot;ID Settings&quot;,&quot;editor&quot;:&quot;datebox&quot;},  
    {&quot;name&quot;:&quot;SSN&quot;,&quot;value&quot;:&quot;123-456-7890&quot;,&quot;group&quot;:&quot;ID Settings&quot;,&quot;editor&quot;:&quot;text&quot;},  
    {&quot;name&quot;:&quot;Email&quot;,&quot;value&quot;:&quot;bill@gmail.com&quot;,&quot;group&quot;:&quot;Marketing Settings&quot;,&quot;editor&quot;:{  
        &quot;type&quot;:&quot;validatebox&quot;,  
        &quot;options&quot;:{  
            &quot;validType&quot;:&quot;email&quot;  
        }  
    }},  
    {&quot;name&quot;:&quot;FrequentBuyer&quot;,&quot;value&quot;:&quot;false&quot;,&quot;group&quot;:&quot;Marketing Settings&quot;,&quot;editor&quot;:{  
        &quot;type&quot;:&quot;checkbox&quot;,  
        &quot;options&quot;:{  
            &quot;on&quot;:true,  
            &quot;off&quot;:false  
        }  
    }}  
]  </pre>
    正如你所看见的,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">property
    grid的创建没有javascript代码,你可以简单的继承扩展<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">editor 类型.</span></span>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 &nbsp;EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/datagrid/easyui-datagrid-demo20.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>